<template>
  <div class="home">
    <div class="bbb">
        <button @click="add" class="add">添加角色</button>
        <div class="tbox" style="height:60vh;overflow-y: scroll;">

            <el-table
            :data="jslb"
            style="width: 100%" 
            @expand-change="zhankai"
            ref="table" :stripe="true" border>
            <el-table-column type="expand">
            <template>
                <el-form label-position="left" inline class="demo-table-expand" :mobel="mrqxname">
                    <h3 style="margin-left: 60px;margin-top: 10px;margin-bottom: 5px;">当前角色权限</h3>
                <el-form-item style="margin-left: 60px;margin-bottom: -10px;" >
                    <el-tag
                    @close="schuqx(x.id)"
                    v-for="x,i in mrqxname" :key="i"
                    closable
                    type="success"
                    style="margin-left: 20px;margin-bottom: 10px;">
                    {{ x.name }}
                    </el-tag>
                </el-form-item>
                </el-form>
            </template>
            </el-table-column>
            <el-table-column
                label="角色名称"
                prop="roleName">
                </el-table-column>
                <el-table-column
                label="角色描述"
                prop="roleDesc">
                </el-table-column>
                <el-table-column
                label="角色操作"
                prop="desc">
                <template slot-scope="scope">
                     <span class="bj" @click="bj(scope.row)">
                       <i class="el-icon-edit"></i> 编辑
                    </span>
                    <span @click="shanchu(scope.row)" style="background-color: #F56C6C;" class="bj">
                       <i class="el-icon-delete"></i> 删除
                    </span>
                    <span class="fp" @click="fp(scope.row)">
                       <i class="el-icon-menu"></i> 分配权限
                    </span>
                </template>
               
                    <!-- 编辑角色 -->
                    
                </el-table-column>
            </el-table>

                    <el-dialog  title="编辑角色" :visible.sync="dialogFormVisible">
                        <el-form :model="ad1">
                            <el-form-item label="角色名称" :label-width="formLabelWidth">
                                <el-input v-model="ad1.roleName" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="角色描述" :label-width="formLabelWidth">
                                <el-input v-model="ad1.roleDesc" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="bjcg">确 定</el-button>
                            </div>
                    </el-dialog>
                    

                    
                    <el-dialog  title="分配权限" :visible.sync="dialogFormVisible1">
                        当前角色：{{ fenpei.name }}
                        <el-tree
                        style="height: 50vh;overflow: auto;"
                        :data="qxl"
                        show-checkbox
                        node-key="id"
                        :default-checked-keys="mrdk"
                        :props="defaultProps"
                        :default-expand-all="true"
                        @check-change="handleNodeClick"
                        ref="tree">
                        </el-tree>
                        <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                                <el-button type="primary" @click="fpcg">确 定</el-button>
                        </div>
                    </el-dialog>
        <!-- <table class="box" cellspacing="0">
            <tr>
                <td style="width:50px;"></td>
                <td style="width:40px;"></td>
                <td style="font-size: 18px;">角色名称</td>
                <td style="font-size: 18px;">角色描述</td>
                <td style="font-size: 18px;">角色操作</td>
            </tr>
            <tr v-for="x,i in jslb" :key="i">
                <td>></td>
                <td>{{ i+1 }}</td>
                <td>{{ x.roleName }}</td>
                <td>{{ x.roleDesc }}</td>
                <td style="width:310px;">
                    <span class="bj" @click="bj(x,i)">
                       <i class="el-icon-edit"></i> 编辑
                    </span>
                    
                    <el-dialog  title="编辑角色" :visible.sync="dialogFormVisible">
                        <el-form :model="ad1">
                            <el-form-item label="角色名称" :label-width="formLabelWidth">
                                <el-input v-model="ad1.roleName" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="角色描述" :label-width="formLabelWidth">
                                <el-input v-model="ad1.roleDesc" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="bjcg">确 定</el-button>
                            </div>
                    </el-dialog>
                    <span @click="shanchu(x,i)" style="background-color: #F56C6C;" class="bj">
                       <i class="el-icon-delete"></i> 删除
                    </span>

                    <span class="fp" @click="fp(x)">
                       <i class="el-icon-menu"></i> 分配权限
                    </span>
                    <el-dialog  title="分配权限" :visible.sync="dialogFormVisible1">
                        当前角色：{{ fenpei.name }}
                        <el-tree
                        style="height: 50vh;overflow: auto;"
                        :data="qxl"
                        show-checkbox
                        node-key="id"
                        :default-checked-keys="mrdk"
                        :props="defaultProps"
                        :default-expand-all="true"
                        @check-change="handleNodeClick"
                        ref="tree">
                        </el-tree>
                        <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                                <el-button type="primary" @click="fpcg">确 定</el-button>
                        </div>
                    </el-dialog>
                </td>
            </tr>
        </table> -->

        </div>
        <div :class="pd?'yc':'tanchuang'">
            角色名称：<input v-model="ad.roleName" type="text" class="zh" name="" > <br>
            角色描述：<input v-model="ad.roleDesc" type="text" class="mm" name="" ><br>
            <button style="background-color: #1f89f3;" class="tj" @click="tj">提交</button>
            <button style="background-color: #c0c0c0;" class="qx" @click="qx">取消</button>
        </div>
        <div  :class="pd?'yc':'zhezhao'">
        </div>
    </div>
  </div>
</template>

<script>
import {jsqx,addjs,bjjsrequest,scjsrequest,fprequest,scqxrequest} from '../../../request/api/roles/jsqx'
import { qxhq } from '../../../request/api/roles/qxlb'
export default {
    data(){
        return{
            jslb:[],
            ad:{
                roleName:'',
                roleDesc:'',
            },
            ad1:{
                id:'',
                roleName:'',
                roleDesc:'',
            },
            schuquanx:{
                roleId:'',
                rightId:'',
            },
            formLabelWidth:'120px',
            dialogFormVisible:false,
            dialogFormVisible1:false,
            pd:true,
            qxl:[],
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            fenpei:{
                name:'',
                id:'',
                roleId:'',
                rids:'',
            },
            mrdk:[],
            mrqxname:[],
            fu:[],
        }
    },
    created(){
        jsqx('list').then(res=>{
            this.jslb=res.data.data
            console.log(this.jslb);
        })
    },
    methods:{
        fb(){
            jsqx('list').then(res=>{
                this.jslb=res.data.data
            })
        },
        // 添加弹窗
        add(){
            this.ad.roleDesc=''
            this.ad.roleName=''
            console.log(this.pd);
            if(this.pd==true){
                this.pd=false
            }else{
            this.pd=true
        }
        },
        // 取消弹窗
        qx(){
        if(this.pd==false){
            this.pd=true
        }
        },
        // 提交添加
        tj(){
        addjs(this.ad).then(res=>{
            if(res.data.meta.status==201){
                if(this.pd==false){
                    this.pd=true
                }
                this.fb()
            }else if(res.data.meta.status==400){
            alert('添加失败')
            }
            
        })
        },
        // 编辑弹窗
        bj(x){
            console.log(x);
            this.ad1=x
            this.dialogFormVisible=true
        },
        // 提交编辑
        bjcg(){
            bjjsrequest(this.ad1).then(res=>{
                console.log(res);
            })
            this.dialogFormVisible=false
        },
        // 删除选中元素
        shanchu(x){
            this.ad1=x
                scjsrequest(this.ad1).then(res=>{
                if(res.data.meta.status==200){
                    this.fb()
                }else{
                    alert('删除失败')
                }
            }) 
        },
        zhankai(row,expandRows){
            if (expandRows.length > 1) {
                expandRows.forEach((expandrow) => {
                if (row.id !== expandrow.id) { //这里需要判断一下展开行的length>1
                    // toggleRowExpansion 设置是否展开，true则展开
                    this.$refs.table.toggleRowExpansion(expandrow, false);
                }
                });
            }
            this.mrqxname=[]
            if(row.children){
                row.children.map(item=>{
                    if(item.children){
                        item.children.map(ch=>{
                            if(ch.children){
                                ch.children.map(di=>{
                                    this.mrqxname.push({name:di.authName,id:di.id})
                                })
                            }
                        })
                    }
                })
            }
            this.schuquanx.roleId=row.id
        },
        schuqx(x){
            this.schuquanx.rightId=x
            scqxrequest(this.schuquanx).then(res=>{
                if(res.data.meta.status==200){
                    this.fb()
                }        
            })
        },
        // 分配弹窗，获取选中的角色本有的权限
        fp(x){
            this.mrdk=[]
            if(x.children){
                x.children.map(item=>{
                    if(item.children){
                        item.children.map(ch=>{
                            if(ch.children){
                                ch.children.map(di=>{
                                    this.mrdk.push(di.id)
                                    this.fu.push(item.id,ch.id)
                                })
                            }
                        })
                    }
                })
            }
            if(this.mrdk){
                this.fenpei.rids=this.fu+','+this.mrdk
            }
            this.fenpei.name=x.roleName
            this.fenpei.id=x.id
            this.dialogFormVisible1=true
            qxhq('tree').then(res=>{
                console.log(res);
                this.qxl=res.data.data
            })
        },
        
        // 树形点击事件，选中的节点数据id拼接并去重
        handleNodeClick (click,checks,index) {
            if(checks){
                if(!this.fenpei.rids){
                    this.fenpei.rids=click.pid+','+click.id
                }else{ 
                        this.fenpei.rids+=','+click.pid+','+click.id
                }   
            }else{
                this.fenpei.rids=String(this.fenpei.rids)
                this.fenpei.rids=this.fenpei.rids.replace(','+click.id,'')
            }
            let px=new Set(this.fenpei.rids.split(',')) 
           this.fenpei.rids=[...px]
           console.log(this.fenpei.rids);
        },

        fpcg(){
            this.fenpei.rids=String(this.fenpei.rids)
            fprequest(this.fenpei).then(res=>{
                if(res.data.meta.status==200){
                this.dialogFormVisible1=false
                   this.fb()
                }else{
                    alert('分配失败')
                }
            })
        }
    },
   
}
</script>

<style scoped>
    .bbb{
        background-color: white;
        padding: 20px;
    }
    .tbox::-webkit-scrollbar{
        display: none;
    }
    .box{
        width: 100%;
        border-collapse:collapse;
        background-color: white;
        overflow-y: scroll;
    }
    td{
        border: 1px solid #c0c0c0;
        padding-left: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .add{
        width: 180px;
        height: 40px;
        display: inline-block;
        border: 1px solid #c0c0c0;
        border-radius: 3px;
        cursor: pointer;
        vertical-align: top;
        text-align: center;
        line-height: 40px;
        background-color: #1f89f3;
        color:white;
        margin-bottom: 20px;
  }
  .bj{
        display: inline-block;
        width: 80px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        margin-right: 12px;
        background-color: #409EFF;
        border-radius: 3px;
        cursor: pointer;
        color: white;
  }
  .fp{
        display: inline-block;
        width: 100px;
        text-align: center;
        height:35px;
        line-height: 35px;
        background-color: #E6A23C;
        color: white;
        cursor: pointer;
        border-radius: 3px;
  }
  .zhezhao{
      width: 100vw;
      height: 100vh;
      background-color: #000000b4;
      position: absolute;
      top: -130px;
      left: -230px;
      z-index: 998;
    }
    .tanchuang{
        width: 500px;
        border: 1px solid #000;
        position: absolute;
        top: 100px;
        left:calc(70vw / 2 - 500px / 2);
        height: 300px;
        z-index: 999;
        background-color: white;
        text-align: center;
    }
  .yc{
    display: none;
  }
  .tj,.qx{
      width: 180px;
      height: 30px;
      border: none;
      margin-top: 50px;
      margin-left: 20px;
    }
    .zh,.mm{
        width: 360px;
        height: 30px;
        border: 1px solid rgb(212, 212, 212);
        margin-top: 50px;
    }
</style>